import React, { useCallback, useState } from 'react';
import {
  Box,
  Stack,
  FormControl,
  InputGroup,
  InputLeftElement,
  Input,
  Icon,
  Button,
  Text,
  HStack,
  Checkbox,
  // useColorModeValue,
} from '@chakra-ui/react';
import { FiUser, FiLock } from 'react-icons/fi';
import {
  AiOutlineWeiboCircle,
  AiOutlineWechat,
  AiOutlineQq,
} from 'react-icons/ai';
import axios from '../../service';

export default function SignIn() {
  const [email, setemail] = useState('13888888888');
  const [password, setpassword] = useState('12345678');
  const onSubmitToEnd = useCallback(() => {
    axios
      .post('users/login', {
        user: {
          email,
          password,
        },
      })
      .then((res) => {
        console.log(res);
        alert('登录成功');
      })
      .catch((e) => {
        alert(e);
        console.error(e);
      });
  }, []);

  return (
    <Box>
      <Stack spacing="15px">
        <Box
          bg="rgba(181, 181, 181, 0.1)"
          //   borderRadius="4px"
          //   border="1px solid #c8c8c8"
        >
          <FormControl>
            <InputGroup>
              <InputLeftElement
                pointerEvents="none"
                children={<Icon as={FiUser}></Icon>}
                height="50px"
              />
              <Input
                value={email}
                onChange={(e) => setemail(e.target.value)}
                placeholder="手机号或邮箱"
                maxLength={11}
                // variant="filled"
                height="50px"
                focusBorderColor="transparent"></Input>
            </InputGroup>
          </FormControl>
          <FormControl>
            <InputGroup>
              <InputLeftElement
                pointerEvents="none"
                children={<Icon as={FiLock}></Icon>}
                height="50px"
              />
              <Input
                value={password}
                onChange={(e) => setpassword(e.target.value)}
                placeholder="密码"
                maxLength={16}
                height="50px"
                type="password"
                focusBorderColor="transparent"></Input>
            </InputGroup>
          </FormControl>
        </Box>
        <HStack justifyContent="space-between">
          <Checkbox
            _focus={{ boxShadow: 'none' }}
            fontSize="15px"
            textColor="#969696">
            记住我
          </Checkbox>
          <Text as="a" color="#999" fontSize="14px">
            登录遇到问题?
          </Text>
        </HStack>
        <Button
          onClick={onSubmitToEnd}
          bg="customize.login"
          _hover={{ bg: 'rgba(49, 148, 208,0.8)' }}
          borderRadius="full"
          color="White"
          _focus={{ boxShadow: 'none' }}>
          登录
        </Button>
      </Stack>
      <Stack mt="40px">
        <HStack className="more-sign" justifyContent="center">
          <Text as="h6" fontSize="12px" color="#b5b5b5" mb="10px">
            社交帐号直接注册
          </Text>
        </HStack>
        <HStack justifyContent="center">
          <Icon
            cursor="pointer"
            fontSize="28px"
            color="#e05244"
            as={AiOutlineWeiboCircle}></Icon>
          <Icon
            cursor="pointer"
            fontSize="28px"
            color="#00bb29"
            as={AiOutlineWechat}></Icon>
          <Icon
            cursor="pointer"
            fontSize="28px"
            color="#498ad5"
            as={AiOutlineQq}></Icon>
        </HStack>
      </Stack>
    </Box>
  );
}
